<template>
  <div>
    <!-- 头部顶栏 -->
    <el-header>
      <!-- 头部组件 -->
     <Top :collaspeBtnClass="collaspeBtnClass" :collapse="collapse" :name="name"></Top>
    </el-header>

    <el-container style="min-height: 100vh;">
      <!-- 侧边栏 -->
      <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246);box-shadow: 2px 0 6px rgb(0 21 41 /35%); ">
        <!-- 侧边栏组件 -->
        <Aside ref="menu" :isCollapse="isCollapse" :textShow="textShow" :handleMenuSelect="handleMenuSelect" :activeIndex="activeIndex"
        :functionMenu="functionMenu"></Aside>
      </el-aside>
  
      <el-container>
   
        <!--主要内容-->
        <el-main>
          <!-- 动态标签页 -->
        <el-tabs v-model="editableTabsValue" type="border-card" editable @tab-remove="removeTab" @tab-click="handleTabClick">
          <el-tab-pane
            :key="item.name"
            v-for="(item) in editableTabs"
            :label="item.title"
            :name="item.name"
            :path="item.path"
          >
              <!-- 路由组件 -->
              <keep-alive>
                <router-view></router-view>
              </keep-alive>
          </el-tab-pane>
        </el-tabs>


        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
    import Aside from '@/components/Aside.vue';
    import Top from '@/components/Top.vue';

    export default {
        name:'Manage',
        components:{Aside,Top },
        data(){
          const item = {
          date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            };
          return{
            sideWidth: 200,
            collaspeBtnClass:'el-icon-s-fold',
            isCollapse:false,
            textShow:true,
            editableTabsValue: '1',
            editableTabs: [{
              title: '首页',
              name: '1',
              path: 'home'
            }],
            tabIndex: 2,
            menuTitle:['首页','员工管理','角色管理','全部通知','发布通知','业主档案','投诉工单','挪车请求',
            '全部房产','房产绑定','全部宠物','创建档案','全部装修','全部工单','全部车辆','车辆建档','全部访客'], //侧边菜单子项
            menuContant:['home','adminUser','role','notice','addNotice','owner','feedback','moveRequest'
            ,'property','propertyBinding','pet','petBinding','renovation','repair','vehicle','createVehicle','visitor'], //侧边菜单路径
            activeIndex: 0, //被激活菜单下标
            functionMenu:[],
            name:''
          }
        },
        mounted(){
          const s = localStorage.getItem("admin")
          const j = JSON.parse(s)
          this.name = j.name
          this.getData()
        },
        methods:{

          getData(){
            this.$request.get("/role/authority-all",{
                params:{
                id:JSON.parse(localStorage.getItem("admin")).id
                }
            }).then(res => {
                  this.functionMenu = res.data
            }).catch(err => {
                console.log(err)
            })
      },

          collapse(){
             this.isCollapse = !this.isCollapse
             if(this.isCollapse){
              this.sideWidth = 64;
              this.collaspeBtnClass = 'el-icon-s-unfold'
              this.textShow = false
             }else{
              this.sideWidth = 200;
              this.collaspeBtnClass = 'el-icon-s-fold'
              this.textShow = true
             }
          },

          /**
           * 方法功能：
           * 点击菜单更换路由路径，且增加动态该标签页
           * @param {菜单子项对象} index 
           */
          handleMenuSelect(index) {
            //获取当前路由路径
            let path = (this.$route.path).slice(1)
            // console.log("当前路径为："+this.$route.path+"  像跳转的地方为"+index)
            // console.log("处理后为："+path)
            
            //判断当前路径是否为菜单栏路径
            if(path === this.menuContant[index]){
              //如果相同，则不跳转
              console.warn("已在当前页")
            }else{
              //不相同，跳转并创建新的标签页
              this.$router.push(this.menuContant[index])
              let newTabName = ++this.tabIndex+''
              this.editableTabs.push({
                title: this.menuTitle[index],
                name:newTabName,
                path:this.menuContant[index]
              })
              this.editableTabsValue = newTabName
            }
          },

          /**
           * 点击标签子项进行切换路由并且激活菜单栏
           * @param {标签子项对象} tab 
           */
          handleTabClick(tab){

            //获取想跳转的路径
            let newPath = this.editableTabs[tab.index].path
            let routePath = (this.$route.path).slice(1)
            if(newPath === routePath){
              console.warn("已在当前页")
            }else{
              this.$router.push(newPath)
              console.log( this.menuContant.indexOf(newPath))
              this.activeIndex = this.menuContant.indexOf(newPath)
            }
          },

          removeTab(targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
              tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                  let nextTab = tabs[index + 1] || tabs[index - 1];
                  if (nextTab) {
                    activeName = nextTab.name;
                  }
                }
              });
            }
            
            this.editableTabsValue = activeName;
            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
          },
        }
       
    }
</script>

<style scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
.el-tabs__new-tab{
  display: none;
}
  
  /* .el-aside {
    color: #333;
  } */
</style>